<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>04_component_props</title>
</head>
<body>

<div id="example1"></div>
<div id="example2"></div>

<script type="text/javascript" src="../js/react.development.js"></script>
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<script type="text/javascript" src="../js/prop-types.js"></script>
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">

    /*
  需求: 自定义用来显示一个人员信息的组件, 效果如页面. 说明
    1). 如果性别没有指定, 默认为男
    2). 如果年龄没有指定, 默认为18
    */

    //1.定义组建
    function Person(props) {
        return (
            <ul>
                <li>姓名：{props.name}</li>
                <li>年龄：{props.age}</li>
                <li>性别：{props.sex}</li>
            </ul>
        )
    }

    //指定组建默认属性值
    Person.defaultProps = {
        age: 18,
        sex: '男'
    };

    //指定属性值的类型和必要性
    Person.propTypes = {
        name: PropTypes.string.isRequired,
        age: PropTypes.number
    };

    //2.渲染组建
    const p1 = {
        name: 'Tom',
        age: 21,
        sex: '女'
    };
    ReactDOM.render(<Person {...p1}/>, document.getElementById('example1'));
    const p2 = {
        name: 'JACK',
    };
    ReactDOM.render(<Person {...p2}/>, document.getElementById('example2'));
</script>
</body>
</html>

